<template>

  <el-dialog :title="id ? '提成修改' : '提成添加'" :visible.sync="dialogVisible" :close-on-click-modal="false" width="25%">

    <el-form ref="main-form" :model="form" :rules="rules" label-width="140px">
      <el-form-item label="level" size="mini" prop="销售几笔">
        <el-select v-model="form.level" size="mini" clearable>
          <el-option v-for="item in levelOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item> 
      <el-form-item label="满几个月可提现" size="mini" prop="monthToLimitWithdraw">
        <el-input placeholder="满几个月可提现" type="number" v-model="form.monthToLimitWithdraw" @keyup.enter.native="submit" clearable></el-input>
      </el-form-item>
  
      <el-form-item label="佣金比例(%)" size="mini" prop="rate">
        <el-input placeholder="佣金比例(%)" type="number" v-model="form.rate" @keyup.enter.native="submit" clearable></el-input>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="close" size="mini">取 消</el-button>
      <el-button type="primary" @click="submit" size="mini" :loading="loading">提 交</el-button>
    </div>

  </el-dialog>
</template>

<script>
import MchTagApiMain from '@/api/platform.mchTag';
import ApiMain from '@/api/formula';
export default {
  mixins: [
  ],
  props: [
  ],
  data() {
    return {

      dialogVisible: false,
      popDeleteVisible: false,
      loading: false,

      form: {
        rate: '',
        level: '',
        id:"",
        formula: "一级",
        monthToLimitWithdraw: null
      },
      levelOptions: [
        {
          value: 1,
          label: "1"
        }, {
          value: 2,
          label: "2"
        }

      ],
      rules: {
        monthToLimitWithdraw: [
          { required: true, message: '请填写满几个月可以提现', trigger: 'blur' },
        ],
        level: [
          { required: true, message: '请选择等级', trigger: 'blur' },
        ],
        rate: [
          { required: true, message: '请填写比例', trigger: 'blur' },
          {
            trigger: 'blur', validator: function (rule, value, callback) {
              if (value < 0 || value > 100) {
                callback(new Error('比例0-100'));
              } else {
                callback();
              }
            }
          },
        ],
      },

      id: null,
      data: null,

      mchTagOptions: [],
      accountFormulaOptions: [],

    }
  },
  mounted() {
  },

  methods: {

    show(data= null) {
      if (data) {
        this.data=data
         this.renderData();
      }
      else {
        this.reset();
      }

      // 加载公式，商户标签
      this.fetchAccountFormulaOption();
      this.fetchMchTagOption();

      this.dialogVisible = true;
    },

    close() {
      this.dialogVisible = false;
      this.$emit('dialog-close');
    },

    reset() {
      this.id = null;
      this.form = {
        rate: '',
        level: '',
        formula: 1,
        monthToLimitWithdraw: null
      };
    },

    fetchAccountFormulaOption() {
      // ApiMain.option({ type: 3 }).then(re => {
      //   this.accountFormulaOptions = re.account;
      // })
    },

    fetchMchTagOption() {
      MchTagApiMain.option().then(re => {
        this.mchTagOptions = re;
      })
    },

   

    renderData() {
      console.log('传递过来',this.data)
      this.id = this.data.id;
      this.form.level =  this.data.level;
      this.form.formula = this.data.formula;
      this.form.monthToLimitWithdraw =  this.data.monthToLimitWithdraw;
      this.form.rate =  this.data.rate / 100;
  
  console.log(this.form)
    },

    verifyForm() {
      var bool = true;
      this.$refs['main-form'].validate((valid) => bool = valid);
      return bool;
    },

    async submit() {

      if (!this.verifyForm()) return false;

      this.loading = true;

      try {
        if (this.id) {
          await this.submitSet();
        }
        else {
          await this.submitAdd();
        }
      } finally {
        this.loading = false;
      }
    },

    formatSubmitForm(form) {
      // 将比例给进公式里
      return form
    },

    async submitDel() {

      this.popDeleteVisible = false;
      this.loading = true;

      await ApiMain.del({ id: this.id });

      this.loading = false;
      this.close();
      this.$message({ message: '删除成功', type: 'success' });
    },

    async submitSet() {

      this.form.id = this.id;
      let form = Object.copy(this.form)
      form.rate *= 100;
      form = this.formatSubmitForm(form)
      await ApiMain.set(form);
      this.$message({ message: '修改成功', type: 'success' });
      this.close();

    },

    async submitAdd() {
      let form = Object.copy(this.form)
      form = this.formatSubmitForm(form)
      await ApiMain.add(form);
      this.$message({ message: '添加成功', type: 'success' });
      this.close();
    },
  }
}
</script>

<style>
</style>
